<template>
	<div class="mobileOrder">
		<!--订单页面-->
		<div>
			 <Tabs value="name1">
		        <TabPane label="全部订单" name="name1" style="">
			        	<div v-for="item,index in 3" :key="index" style="width: 100%;padding: 10px;">
			        		<Card>
				                <p slot="title">
				                	创建时间：xxxxxxxxx  订单号：xxxxxxxxx
				                </p>
				                <div style="width: 100%;">
				                	<Row type="flex" align="middle" justify="center" >
										<Col span="8" style="text-align: center;padding: 10px;">
											<p>
												家庭保洁-临时保洁
											</p>
											<p>
												1人/3小时/144元
											</p>
										</Col>
										<Col span="8" style="text-align: center;padding: 10px;border-left: 1px solid #f7f7f7;border-right: 1px solid #f7f7f7;">
											<p>
												称呼：张三
											</p>
											<p>
												电话：13777777777
											</p>
											<p>
												地址：厦门市集美区
											</p>
										</Col>
										<Col span="8" style="text-align: center;padding: 10px;">
											<p>
												￥：144元
											</p>
										</Col>
									</Row>
				                </div>
				            </Card>
			        	</div>
		        </TabPane>
		        <TabPane label="待处理" name="name2"></TabPane>
		        <TabPane label="处理中" name="name3"></TabPane>
		        <TabPane label="完成" name="name4"></TabPane>
		    </Tabs>
								
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="css" scoped>
	.mobileOrder >>> .ivu-tabs-nav .ivu-tabs-tab-active{
		color: #009a00 !important;
	}
	.mobileOrder >>> .ivu-tabs-ink-bar{
		background-color: #009a00 !important;
	}
	.mobileOrder >>> .ivu-tabs-nav .ivu-tabs-tab:hover{
		color: #009a00 !important;
	}
	.mobileOrder >>> .ivu-card-head{
		padding: 7px 16px;
	    text-align: left !important;
	    background-color: #f7f7f7 !important;
	}
</style>